{{set . "title" "Basic Chat room"}}
{{template "header.html" .}}

<h1>Ajax, using active refresh — You are now chatting as {{.user}}
  <a href="/refresh/room/leave?user={{.user}}">Leave the chat room</a></h1>

<div id="thread">
  {{range .events}}
    {{if eq .Type "message"}}
      <div class="message {{if eq .User "you"}}you{{end}}">
        <h2>{{.User}}</h2>
        <p>
          {{.Text}}
        </p>
      </div>
    {{end}}
    {{if eq .Type "join"}}
      <div class="message notice">
        <h2></h2>
        <p>
          {{.User}} joined the room
        </p>
      </div>
    {{end}}
    {{if eq .Type "leave"}}
      <div class="message notice">
        <h2></h2>
        <p>
          {{.User}} left the room
        </p>
      </div>
    {{end}}
  {{end}}
</div>

<div id="newMessage">
  <form method="post" action="/refresh/room?user={{.user}}">
    <input type="text" id="message" name="message" autocomplete="off" autofocus>
    <input type="submit" value="send" id="send">
  </form>
</div>

<script type="text/javascript" charset="utf-8">

  // Scroll the messages panel to the end
  var scrollDown = function() {
    $('#thread').scrollTo('max')
  }

  // Reload the whole messages panel
  var refresh = function() {
    $('#thread').load('/refresh/room?user={{.user}} #thread .message', function() {
      scrollDown()
    })
  }

  // Call refresh every 5 seconds
  setInterval(refresh, 5000)

  scrollDown()

</script>
{{template "footer.html" .}}
